<div class="login-container">
    <div class="login-header"></div>
    <form (ngSubmit)="submitForm()" [formGroup]="validateForm" class="register-form" nz-form>
        <nz-form-item>
            <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="loginName" nzRequired>用户名</nz-form-label>
            <nz-form-control [nzSm]="14" [nzXs]="24" nzErrorTip="请输入用户名!">
                <input formControlName="loginName" id="loginName" nz-input/>
            </nz-form-control>
        </nz-form-item>
        <nz-form-item>
            <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="password" nzRequired>密码</nz-form-label>
            <nz-form-control [nzSm]="14" [nzXs]="24" nzErrorTip="请输入密码!">
                <input
                    (ngModelChange)="updateConfirmValidator()"
                    formControlName="password"
                    id="password"
                    nz-input
                    type="password"
                />
            </nz-form-control>
        </nz-form-item>
        <nz-form-item>
            <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="confirmPassword" nzRequired>确认密码</nz-form-label>
            <nz-form-control [nzErrorTip]="errorTpl" [nzSm]="14" [nzXs]="24">
                <input formControlName="confirmPassword" id="confirmPassword" nz-input type="password"/>
                <ng-template #errorTpl let-control>
                    <ng-container *ngIf="control.hasError('required')">
                        请输入确认密码!
                    </ng-container>
                    <ng-container *ngIf="control.hasError('confirm')">
                        两次密码不一样!
                    </ng-container>
                </ng-template>
            </nz-form-control>
        </nz-form-item>
        <nz-form-item>
            <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="tel" nzRequired>手机号码</nz-form-label>
            <nz-form-control
                [nzSm]="14"
                [nzValidateStatus]="validateForm.controls['tel']"
                [nzXs]="24"
                nzErrorTip="Please input your phone number!"
            >
                <nz-input-group [nzAddOnBefore]="addOnBeforeTemplate">
                    <ng-template #addOnBeforeTemplate>
                        <nz-select class="phone-select" formControlName="phoneNumberPrefix">
                            <nz-option nzLabel="+86" nzValue="+86"></nz-option>
                        </nz-select>
                    </ng-template>
                    <input formControlName="tel" id="'tel'" nz-input/>
                </nz-input-group>
            </nz-form-control>
        </nz-form-item>
        <nz-form-item>
            <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="verifyCode" nzRequired>验证码</nz-form-label>
            <nz-form-control
                [nzSm]="14"
                [nzXs]="24"
                nzErrorTip="请输入您收到的手机验证码!"
            >
                <div [nzGutter]="8" nz-row>
                    <div [nzSpan]="12" nz-col>
                        <input formControlName="verifyCode" id="captcha" nz-input/>
                    </div>
                    <div [nzSpan]="12" nz-col>
                        <button (click)="generateVerifyCode($event)" [disabled]="btnDisable" nz-button>点此获取</button>
                    </div>
                </div>
            </nz-form-control>
        </nz-form-item>
        <nz-form-item class="register-area" nz-row>
            <nz-form-control [nzOffset]="6" [nzSpan]="14">
                <label formControlName="agree" nz-checkbox>
                    <span>同意协议</span>
                </label>
            </nz-form-control>
        </nz-form-item>
        <span *ngIf="errorMessage" class="errorMessage">{{errorMessage}}</span>
        <nz-form-item class="register-area" nz-row>
            <nz-form-control [nzOffset]="6" [nzSpan]="14">
                <button nz-button nzType="primary">注册</button>
            </nz-form-control>
        </nz-form-item>
    </form>
    <!--<div class="login-footer">广东绘宇智能勘测科技有限公司</div>-->
</div>



